const { Form, Input, Button } = window.antd
const { useEffect } = window.React

function DesignConfiguration(props) {
  const [form] = Form.useForm()
  //此处的customConfig已经封装为一个object，可以直接使用,changeCustomConfig的入参应为一个json字符串
  const { changeCustomConfig, customConfig } = props
  //id为默认添加的配置项，勿删
  useEffect(() => {
    form.setFieldsValue(customConfig)
  }, [])
  const handleValueChange = (changedValues, allValues) => {
    changeCustomConfig(JSON.stringify({ ...customConfig, ...allValues }))
  }
  !customConfig.number && (customConfig.number = 1)
  const handleClick = () => {
    customConfig.number++
    changeCustomConfig(JSON.stringify(customConfig))
  }
  const formItemLayout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 20 }
  }

  return (
    <>
      {/*id为默认添加，不可删除*/}
      <Form
        {...formItemLayout}
        form={form}
        onValuesChange={handleValueChange}
      >
        <Form.Item label="id" name="id">
          <Input style={{ width: "200px" }} />
        </Form.Item>
      </Form>
      <Button onClick={handleClick}>配置项与主渲染区域交互样例</Button>
    </>
  )
}

export default DesignConfiguration
